import { Input, Spin, message,Tooltip } from "antd";
import { WeaAvatar  } from "ecCom";
import { inject, observer } from "mobx-react";
import React from "react";
import { i18n } from "../../../public/i18n";
import EditableTagGroup from "./EditableTagGroup";
import { toJS } from "mobx";

/**
 * 人员基础信息展示
 * 包含：
 *      基础信息：姓名、头像、部门岗位职务等信息。
 *      个性签名显示与修改
 *      个人标签展示与修改。
 */
@inject("individualMainStore")
@observer
export default class UserInfoCardCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      signInputVisible: false, //个性签名输入框显示
      inputValue: "",
    };
    this.store = this.props.individualMainStore;
    this.signRef=React.createRef();  
  }
  
  showInput = () => {
    const {
      personalIndexData: { autograph },
    } = this.store;
   
    this.setState({ signInputVisible: true, inputValue: autograph.content },
      ()=>{
        const { input } = this.signRef.refs;
        input && input.focus();
      });
  };

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  // 个性签名修改
  handleInputConfirm = () => {
    const { inputValue } = this.state;
    const { setIndividualAutograph, personalIndexData: { autograph } } = this.store;
    this.setState(
      {
        signInputVisible: false,
      },
      () => {
        if (inputValue && inputValue.trim().length > 0) {
          inputValue != autograph.content && setIndividualAutograph(inputValue);
        } else {
          message.warn(i18n.message.noEmptySignature());
        }
      }
    );
  };

  // 个人标签新建
  onTagInputConfirm = (tag) => {
    const { addIndividualInfoTag } = this.store;
    addIndividualInfoTag(tag);
  };
  // 个人标签删除
  onTagDelete = (id) => {
    const { delIndividualInfoTag } = this.store;
    delIndividualInfoTag({
      id: id,
    });
  };

  render() {
    const { signInputVisible, inputValue } = this.state;
    const {
      personalIndexData: {
        individualInfoTag,
        canEditAutograph,
        autograph,
        basicInfo: info,
      },
      loadings: { userInfoLoading },
    } = this.store;
    const isLongWords = autograph.content && autograph.content.length > 28;
    let content = autograph.content||i18n.label.plzInputSignature();
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@2fhkll`} spinning={userInfoLoading}>
        <div className="bg-container">
        <div className="basic-info-container">
          <div className="avatar-wrapper">
              <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@03crmx`} requestParams={info.avatar} />
          </div>
          <div className="info-wrapper">
            <div className="top-info">
              <span className="name-span" title={info.name}>{info.name}</span>
              <div className="signature-container">
                {!signInputVisible && (
                  <span className="signature-span">
                    <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@juefqe`} placement="bottom" title={content}>
                      <span>{isLongWords ? content.slice(0, 28)+'...':content}</span>
                    </Tooltip>
                  
                    {canEditAutograph && (
                      <i
                        className="icon-portal-Journal-o"
                        onClick={this.showInput}
                        style={{ cursor: "pointer", marginLeft: "10px" }}
                      />
                    )}
                  </span>
                )}
                {signInputVisible && (
                  <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@em0ial`}
                    ref={(input)=>this.signRef = input}
                    type="text"
                    size="small"
                    className="sign-input"
                    value={inputValue}
                    onChange={this.handleInputChange}
                    onBlur={this.handleInputConfirm}
                    onPressEnter={this.handleInputConfirm}
                  />
                )}
              </div>
            </div>
            <div className="tag-info">
              <EditableTagGroup ecId={`${this && this.props && this.props.ecId || ''}_EditableTagGroup@g0ou32`}
                data={toJS(individualInfoTag)}
                onTagInputSaveCallBack={this.onTagInputConfirm}
                onTagDeleteCallBack={this.onTagDelete}
              />
            </div>
            <div className="main-info">
              <div>
                <span className="detail-span">
                  {i18n.label.department()}: {info.dep}
                </span>
                <span className="detail-span">
                  {i18n.label.duties()}: {info.duties}
                </span>
                <span className="detail-span">
                  {i18n.label.subordinates()}: {info.subordinate}
                </span>
              </div>
              <div style={{ marginTop: "7px" }}>
                <span className="detail-span">
                  {i18n.label.superior()}: {info.superiorName}
                </span>
                <span className="detail-span">
                  {i18n.label.post()}: {info.post}
                </span>
                <span className="detail-span">
                  {i18n.label.seniority()}: {info.seniority}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div style={{clear:"both"}}></div>
        </div>
      </Spin>
    );
  }

}
